<!--
 * @Author: wangding
 * @Date: 2020-11-09 14:33:19
 * @LastEditTime: 2021-01-04 14:13:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\sn\sn.vue
-->
<template>
    <div class="found-sn-main-box">
        
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">Gateway SN</span>
                <el-input v-big v-model="wifiSN" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('opttask.createTime')}}</span>
                <el-date-picker
                v-model="createTimeStr"
                type="date"
                :placeholder="$t('selectDate')"
                value-format='yyyy-MM-dd'
                :clearable='true'
                :picker-options="pickerOptions"
                >
                </el-date-picker>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <el-button type="primary" icon='el-icon-plus' @click="()=>{$store.commit('setNewVisible',true)}">{{$t('add')}}</el-button>
            <el-button type="" @click="()=>{$store.commit('setNewVisibleEdit',true)}">{{$t('import')}}</el-button>
            <el-button type="" @click="()=>{$store.commit('setNewVisibleFlow',true)}">{{$t('export')}}</el-button>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe   :column='column' :select='false'>
            <template #deviceType="">
                Gateway
            </template>
            <template #bindStatus="{data}">
                {{returnStatus(data.bindStatus)}}
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <add @uploadData='query' v-if='newVisible'></add>
        <importModal @uploadData='query'></importModal>
        <exportModal @uploadData='query'></exportModal>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import add from './add'
import importModal from './import'
import exportModal from './export'
import moment from 'moment'
export default {
    components: {
        baseTable,
        add,
        importModal,
        exportModal
    },
    props: {

    },
    data() {
        return {
            fileValue:'',
            wifiSN:'',
            deviceType:'',
            dictionary:[],
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            createTimeStr:'',
            loading:false,
            dataRows:[],
            size:10,
            total:1,
            current:1,
            firmIds:'',
            column:[{
                title: 'Gateway SN',
                value: 'gateSN',
            },
            {
                title: this.$t('devWifi.deviceType'),
                value: 'deviceType',
                slot: 'deviceType'
            },
            {
                title: this.$t('opttask.createTime'),
                value: 'createTime'
            },
            {
                title: this.$t('sn.snStatus'),
                value: 'bindStatus',
                slot: 'bindStatus'
            }],
        };
    },
    computed: {
        newVisible(){
            return this.$store.state.sysStore.newVisible
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.snGetPage()
    },
    methods: {
        returnStatus(status){
            if (status == 0) {
                return '未绑定'
            }else
            if (status == 1) {
                return '已绑定'
            }
        },
        async snGetPage(){
            this.loading = true
            let res = await this.API.devgatewayGetPage({
                gateSN:this.wifiSN,
                createTimeStr:this.createTimeStr,
                size:this.size,
                current:this.current
            })
            this.total = res.total
            this.dataRows = res.rows
            this.loading = false
        },
        query(){
            this.current = 1
            this.snGetPage()
            // this.comm.showMsg(false)
        },
        handleCurrentChange(val) {
          this.current = val
          this.snGetPage()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.snGetPage()
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
